<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${systemName}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>
    <link href="${ctxPath}/assets/expand/plugins/ztree/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <style>
    .layui-input-block{
       padding:  0px;
       min-height: 30px;
    }
    .layui-form-item{
      margin: 0px;
      padding:  0px;
    }
    .layui-form-radio {
      line-height: 12px;
      margin: 8px 10px 0 0;
      padding-right: 10px;
      cursor: pointer;
      font-size: 0;
    }
    .layui-form-radio>i {
      margin-right: 4px;
      font-size: 18px;
      color: #c2c2c2;
    }
    </style>
</head>

<body>

  <div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
 <li class="layui-this">功能权限</li>
 <li>数据权限</li>
</ul>
<div class="layui-tab-content" style="height: 100%;">

 <div class="layui-tab-item layui-show">
   <div class="layui-row" style="margin-top:5px;background: #f2f7f8;padding: 10px;">
       <ul id="zTree" class="ztree"></ul>
   </div>
 </div>


 <div class="layui-tab-item">
   <div class="layui-row" style="margin-top:5px;background: #f2f7f8;padding: 10px;">
   <form class="layui-form">


@if(isNotEmpty(menus)){
 @for(menu in menus){
  <div class="j_radio_box" id="${menu.menuId}">
    <hr>
    ${menu.menuName}
      @for(attr in menu.attrs){
        <div class="layui-form-item ztree" >
        <label class="layui-form-label ztree" style="align:left">${attr.attrName}</label>
        <div class="layui-input-block ztree">
          <input  type="radio" name="attr_${attr.attrId}" class="j_radio" id="${attr.attrId}" value="rw" title="读写" ${attr.attrAuth=='rw'?'checked':''}>
          <input  type="radio" name="attr_${attr.attrId}" class="j_radio" id="${attr.attrId}" value="r" title="只读"  ${attr.attrAuth=='r'?'checked':''}>
          <input  type="radio" name="attr_${attr.attrId}" class="j_radio" id="${attr.attrId}" value="hide" title="不可见"  ${attr.attrAuth=='hide'?'checked':''}>
        </div>
      </div>
      @}
  </div>
 @}
 @}

</form>
</div>

 </div>

 <div class="layer-footer" style="background: #CFD4D5;padding: 10px;">
     <div style="text-align: center;">
         <button class="layui-btn layui-btn-sm"  id="saveButton">保存角色权限</button>
         <button class="layui-btn layui-btn-sm layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
     </div>
 </div>

</div>
</div>


<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>

<!--其他插件js-->
<script type="text/javascript" src="${ctxPath}/assets/expand/plugins/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/expand/plugins/ztree/jquery.ztree.all.min.js"></script>

<script type="text/javascript">
    Sam.ctxPath="${ctxPath}";

    layui.use(['ztree','ax','element','form'], function () {
        var $ZTree = layui.ztree;
        var $ax = layui.ax;

        var ZTreeDlg = {
            index: parent.layer.getFrameIndex(window.name)
        };

        $("#saveButton").bind("click", function () {
            var ids = Sam.zTreeCheckedNodes("zTree");
            var eleBox = $('.j_radio_box')
            var eleLen = eleBox.length
            var dataStr = ''
            var arr = []
            if(eleLen) {
              for(var i = 0; i <= eleLen - 1; i++ ) {
                var eleRideo = eleBox.eq(i).find('.j_radio')
                var eleRideoLen = eleRideo.length
                var boxId = eleBox.eq(i).attr('id')
                if(eleRideoLen) {
                  var rStr = []
                    for(var n = 0;n<=eleRideoLen-1;n++) {
                      var id,val
                      if(eleRideo.eq(n)[0].checked) {
                        id = eleRideo.eq(n).attr('id')
                        val = eleRideo.eq(n).attr('value')
                        rStr.push([boxId,id,val].join(','))
                      }
                    }
                    arr.push(rStr.join('|'))
                }
              }
            }
            dataStr= arr.join('|');

            var ajax = new $ax(Sam.ctxPath + "/sam/role/setAuthority", function (data) {
                Sam.success("角色授权成功!");
                parent.layer.close(ZTreeDlg.index);
            }, function (data) {
                Sam.error("角色授权失败!" + data.responseJSON.message + "!");
            });
            ajax.set("ids", ids);
            ajax.set("datas", dataStr);
            ajax.set("roleId", "${roleId}");
            ajax.start();
        });


        var setting = {
            check: {
                enable: true,
                chkboxType: {
                    "Y": "p",
                    "N": "s"
                }
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var ztree = new $ZTree("zTree", Sam.ctxPath +"/sam/menu/menuTreeListByRoleId/${roleId}");
        ztree.setSettings(setting);
        ztree.init();
    });

</script>

</body>

</html>
